<template>
	<view class="page-box">
		<uni-section title="配套设施" type="line"></uni-section>
		<view class="match-box">
			<text>请点击选择房屋拥有的配套设施</text>
			<view>				
				<view v-for="(item, index) in facilityList" @click="match(item)" :class="{'active': item.support}">{{item.title}}</view>		
			</view>			
		</view>			
		<view class="big-btn" @click="fnSubmit">下一步</view>
	</view>
</template>

<script>
import uniSection from '@/components/uni-section/uni-section.vue';
export default {
	components: {
		uniSection
	},
	onLoad(option) {
		this.house = JSON.parse(decodeURIComponent(option.param))
	},
	data() {
		return {
			house:{
				wash_machine: false,
				heater: false,
				air_conditioner: false,
				frige: false,
				is_gas: false,
				range_hood: false,
				bed: false,
				wardrobe: false,
				television: false,
				network: false
			},
			facilityList:[
				{title: '洗衣机', key:'wash_machine', support: false},
				{title: '热水器', key:'heater', support: false},
				{title: '空调', key: 'air_conditioner', support: false},
				{title: '冰箱', key: 'frige', support: false},
				{title: '天然气', key: 'is_gas', support: false},
				{title: '油烟机', key: 'range_hood', support: false},
				{title: '床', key: 'bed', support: false},
				{title: '衣柜', key: 'wardrobe', support: false},
				{title: '电视', key: 'television', support: false},
				{title: '网络', key: 'network', support: false}	
			]
		}
	},
	methods: {
		match(item){
			if(item.support == false){
				item.support = true
				this.house[item.key] = true
			}else{
				item.support = false
				this.house[item.key] = false
			}			
		},
		fnSubmit() {
			console.log(this.house);
			// pageType 1二手房 2新房 3租房
			uni.navigateTo({
				url: '/pages/house/publishSale?param=' + encodeURIComponent(JSON.stringify(this.house))
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.page-box {
	padding-bottom: 88rpx;
	box-sizing: border-box;

	/deep/ .uni-section {
		margin-top: 0;
		background: #fff;
	}

	/deep/ .line {
		background-color: #f13b32;
	}
}

.match-box {
	background: #FFF;
	
	> text {
		display: block;
		padding-left: 40rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		color: #6D6D72;
	}
	
	> view {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		
		view {
			float: left;
			margin: 10rpx;
			padding: 0 20rpx;
			border: 1px solid #6D6D72;
			border-radius: 40rpx;
			min-width: 100rpx;
			line-height: 60rpx;
			text-align: center;
			color: #6D6D72;
			box-sizing: border-box;
			
			&.active {
				border-color: #f13b32;
				color: #FFF;
				background: #f13b32;
			}
		}
	}
}

.big-btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	line-height: 88rpx;
	text-align: center;
	color: #fff;
	background: #f13b32;
}
</style>
